<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta name="referrer" content="no-referrer" /> -->
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js "></script>
    <style>
      /* 表格的初始化 */
      table,
      tr,
      th,
      td {
        /* 给表格添加边框 */
        border: 1px solid #ddd;
        /* 将表格的边框合并为一个单一的边框 */
        border-collapse: collapse;
        /* 设置相x邻单元格的边框间的距离（仅用于"边框分离"模式） */
        border-spacing: 0;
      }

      /* 设置表格样式 */
      .cart {
        /* 给表格设置最小宽度，使 */
        min-width: 650px;
        /* 使表格居中 */
        margin: 0 auto;
      }

      /* 设置表格标题样式 */
      .cart caption {
        /* 让表格标题加粗，还可以写700 */
        font-weight: bold;
      }

      /* 设置表头的样式 */
      .cart th {
        /* 设置表头中的文字与边框间的距离 */
        padding: 5px 10px;
        /* 设置表头的背景颜色 */
        background-color: #f7f7f7;
      }

      .cart td {
        /* 为什么使用的是padding，而不是text-align: center,因为前者是使文字居左对齐，后者是使文字居中对齐，当文字比较多的时候，居中对齐就有些不美观 */
        padding: 5px 35px;
      }

      .cart .total {
        /* 使文字居右对齐，我之前使用的是右浮动 */
        text-align: right;
      }

      /* 图片的样式 */
      td img {
        width: 30px;
        margin-right: 10px;
        vertical-align: middle;

      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 在表格外套一个div，在它的身上设置宽度，不要直接在表格上设置宽度，会有一些问题(一些东西无法对齐) -->
      <div class="box">
        <table class="cart">
          <!-- 在表格内部添加一个子元素<caption>作为表格标题，我之前是在表格外使用h系列标签作为表格标题的 -->
          <caption>
            购物车
          </caption>
          <tr>
            <th>
              全选
              <!-- 全选按钮 -->
              <input type="checkbox" v-model = "allChecked">

            </th>
            <th>书籍名称</th>
            <th>单价</th>
            <th>小计</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(book,index) in books" :key="book.id">
            <td>
              <!-- 复选框 -->
              <input type="checkbox" v-model="book.isSelected">
            </td>
            <td>
              <!-- 封面图 -->
              <img :src="book.productCover">
              <!-- 书名 -->
              <span>{{book.productName}}</span>
            
            </td>
            <!-- 单价 -->
            <td>{{book.productPrice}}</td>

            <td>{{book.productPrice*book.productCount}}</td>
            <td>
              <button @click="book.productCount>1 ? book.productCount-- : ''">-</button>
              {{book.productCount}}
              <button @click="book.productCount++">+</button>
            </td>
            <td>
              <button @click="books.splice(index,1)">移除</button>
            </td>
          </tr>
          <tr v-if="books.length" class="total">
            <td colspan="6">总价格:{{count()}}</td>
          </tr>

          <tr v-else>
            <td colspan="6">购物车中没有商品</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 引入axios -->
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
    //  import axios from 'axios'

      const { createApp, ref, computed, watch , onMounted } = Vue
      createApp({
        setup() {
          // 内容显示
          const books = ref([])

          // 对数据进行初始化渲染
            onMounted(() => {
              axios.get('http://122.112.161.135:8000/cart').then(res=>{
            books.value = res.data
          })
        }) 

          




        // 实现全选按钮
        /* 
          这里使用了一个可读可写的计算属性:
          computed计算属性中包含了set和get两个方法（回调函数）
          get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值
          set回调函数:监视当前属性值发生改变时调用,更新相关的属性值
        */
        const allChecked = computed(
          {
            get: () => books.value.every(
              book => book.isSelected == true
              
            ),
            set: (val) => {
              books.value.forEach(book => {
                book.isSelected = val
              });
            }
          }
        )

          // 计算总价格
     /*      const total = computed(() => {
            let sum = 0
            for (let book of books.value) {
              sum += book.productPrice * book.productCount
            }

            return sum
          }) */


          function count() {
            const booksValue = []
            // const booksId = []

            let sum = 0

            books.value.forEach(book => {
              if(book.isSelected == true) {
                booksValue.push(book.productPrice * book.productCount)
                // booksId.push(book.id)
              }
              /* else{
                booksId.splice(book.id)
              } */

            });

            booksValue.forEach(val => {
              sum += val
            })

            return sum.toFixed(2)
          }






          return {
            books,
            allChecked,
            count,
          }
        },
      }).mount("#app")
    </script>
  </body>
</html>
